<template>
	<view>
		<view class="card" v-if="goodsList?.tabIndex==0||goodsList?.tabIndex==1" v-for="item in goodsList?.list" :key="item?._id" @click="$emit('goDetail',item?._id)">
			<fui-row style="min-height: 260rpx;">
				<fui-col :span="24" style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
					<view style="max-height: 80rpx;width: 100%;margin-bottom: 10rpx;" class="fui-col__item fui-col_text">
						<view class="fui-col_text-a">
							<fui-overflow-hidden :text="item?.content" :rows="2" size="26"></fui-overflow-hidden>
						</view>
					</view>
					<view class="fui-col__item fui-color__black" :style="{justifyContent:item?.articles_img.length<4?'flex-start':'space-between'}" style="display: flex;">
						<view style="width: calc(100% / 4 - 5px);height: 140rpx;box-sizing: border-box;margin: 5rpx;" v-for="(it,index) in item?.articles_img?.slice(0,4)" :key="index">
							<fui-lazyload :width="-1" radius="10" :height="140" :src="it" mode="aspectFill"></fui-lazyload>
						</view>
					</view>
					<view class="fui-col_bottom">
						<view class="sort" :class="!item?.is_sticky&&!item?.is_auto_refresh?'sort1':''">
							<view class="tap">
								<view class="wzzd" v-if="item?.is_sticky">
									<text>顶</text>
								</view>

								<view class="wzzdsx" v-if="item?.is_auto_refresh">
									新
								</view>
							</view>

						</view>
						<view class="browse">
							<text>浏览{{item?.view_count}}次</text>
						</view>
						<view style="color: var(--fui-color-label);">
							<text>{{getDateDiff(item?.refreshed_time)}}</text>
						</view>
					</view>
				</fui-col>
			</fui-row>
		</view>
		<view class="card" v-if="goodsList?.tabIndex==2" v-for="item in goodsList?.list" :key="item?._id" @click="$emit('goDetail',item?._id,item?.hongBao_num)">
			<fui-row style="min-height: 260rpx;">
				<fui-col :span="24" style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
					<view style="max-height: 80rpx;width: 100%;margin-bottom: 10rpx;" class="fui-col__item fui-col_text">
						<view class="fui-col_text-a">
							<fui-overflow-hidden :text="item?.content" :rows="2" size="26"></fui-overflow-hidden>
						</view>
					</view>
					<view class="fui-col__item fui-color__black" :style="{justifyContent:item?.articles_img.length<4?'flex-start':'space-between'}" style="display: flex;">
						<view style="width: calc(100% / 4 - 5px);height: 140rpx;box-sizing: border-box;margin: 5rpx;" v-for="(it,index) in item?.articles_img?.slice(0,4)" :key="index">
							<fui-lazyload width="-1" radius="10" height="140" :src="it" mode="aspectFill"></fui-lazyload>
						</view>
					</view>

					<view class="fui-col_bottom">
						<view class="browse">
							<text>浏览{{item?.view_count}}次</text>
						</view>
						<view style="color: var(--fui-color-label);">
							<text>{{getDateDiff(item?.refreshed_time)}}</text>
						</view>
					</view>
					<view class="fui-col_bottom">
						<view class="sort">
							<image style="width: 38rpx;height: 38rpx;" src="/static/hongbao.png" mode=""></image>
							<view style="font-size: 30rpx;color: red;">
								{{item.hongBao_money}}元
							</view>
						</view>
						<view style="color: var(--fui-color-subtitle);font-size: 26rpx;" v-if="item?.hongBao_num==0">
							来晚一步红包已被抢完
						</view>
						<view style="color: var(--fui-color-subtitle);font-size: 26rpx;" v-if="item?.hongBao_num!==0">
							剩余{{item?.hongBao_num}}个红包待领取
						</view>
					</view>
				</fui-col>

			</fui-row>
		</view>
	</view>
</template>

<script setup>
	// import { setDwNum } from '@/utils/index.js'
	import { getDateDiff, formatDate } from '@/utils/index.js'
	const goodsList = defineProps(['list', "tabIndex"])
	//图片预览
	const previewImage = (item, index) => {
		uni.previewImage({
			current: index, // 当前显示图片的索引值
			urls: item, // 需要预览的图片列表，photoList要求必须是数组
			longPressActions: {
				itemList: ['保存图片', '识别二维码'],
				success: function(res) {
					console.log('选中了第' + (res.tapIndex + 1) + '个按钮,第' + (res.index + 1) + '张图片');
					if (res.tapIndex == 0) {
						plus.nativeUI.closePreviewImage();
						//保存到相册
						uni.saveImageToPhotosAlbum({
							filePath: item[index],
							success: function() {
								uni.showToast({
									title: '成功保存到系统相册中',
									icon: 'none',
									duration: 2000
								});
							}
						});
					} else {
						parseCode(item[index])
					}
				},
				fail: function(err) {

				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.fuImg {
		position: relative;
	}

	.mengban {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		font-size: 50rpx;
		color: #ccc;
		top: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.title {
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
	}

	.images {
		margin-top: 10rpx;
		width: 100%;
		background-color: #fff;
	}

	.card1 {
		box-sizing: border-box;
		border-radius: 15rpx;
		margin-top: 15rpx;
		background-color: #fff;
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}


	.userInfo {
		border-radius: 15rpx;
		width: 75vw;
		padding: 32rpx 32rpx 32rpx 0rpx;
		background-color: var(--fui-bg-color);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.avatar1 {
		padding: 32rpx 10rpx 32rpx 32rpx;
		display: flex;
	}


	.button {
		padding: 10rpx 30rpx;
		color: #fff;
		border-radius: 40rpx;
		background-color: var(--fui-color-primary);
	}

	.user_text {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.user_value {
		color: var(--fui-color-subtitle);
		font-size: 20rpx;
	}

	.user_name {}

	.level {
		display: flex;
		padding: 2rpx 20rpx 2rpx 0;
		border-radius: 10rpx;
		justify-content: space-between;
		align-items: center;
		vertical-align: middle;
		font-size: 22rpx;
		background-color: #000;
		color: #febf40;

		image {
			margin-top: 5rpx;
		}
	}

	.tag-list {
		display: flex;
		justify-content: space-between;
	}

	.zdsx {
		margin-left: 20rpx;
		padding: 5rpx 15rpx;
		border-radius: 8rpx;
		color: #fff;
		background-color: var(--fui-color-primary);
	}

	.zd {
		color: #fff;
		padding: 5rpx 15rpx;
		border-radius: 8rpx;
		background-color: var(--fui-color-danger);
	}

	.lx {
		padding: 8rpx 18rpx;
		background-color: var(--fui-color-primary);
		color: #fff;
		border-radius: 22rpx;
	}

	.bottom {
		padding-top: 20rpx;
		align-items: center;
		font-size: 26rpx;
		color: var(--fui-color-subtitle);
		display: flex;
		justify-content: space-between;
		// position: relative;
	}

	.line {
		position: relative;
	}

	.line::after {
		content: '';
		width: 100%;
		height: 1rpx;
		background-color: #181818;
		position: absolute;
		left: 0;
		top: 0;
		transform: scaleY(0.1);
	}

	.card {
		background-color: #fff;
		padding: 32rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		position: relative;
	}

	.uptime1 {
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		font-size: 26rpx;
		background-color: #feeaeb;
		color: #e57276;
		padding: 10rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		top: 0;
		right: 0
	}

	.container {
		margin-top: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 20rpx;
	}

	.title_box {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.title {
		width: 40vw;
		font-size: 32rpx;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.tag {
		font-size: 26rpx;
		color: var(--fui-color-subtitle);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.head {
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.tag-list {
		display: flex;
		justify-content: space-between;
	}

	.zdsx1 {
		margin-left: 20rpx;
		padding: 5rpx 15rpx;
		border-radius: 8rpx;
		color: #fff;
		background-color: var(--fui-color-primary);
	}

	.zd1 {
		color: #fff;
		padding: 5rpx 15rpx;
		border-radius: 8rpx;
		background-color: var(--fui-color-danger);
	}

	.lx {
		padding: 8rpx 18rpx;
		background-color: var(--fui-color-primary);
		color: #fff;
		border-radius: 22rpx;
	}

	.bottom {
		padding-top: 20rpx;
		font-size: 26rpx;
		color: var(--fui-color-subtitle);
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.bottom::after {
		content: '';
		width: 100%;
		height: 1rpx;
		background-color: #181818;
		position: absolute;
		left: 0;
		top: 0;
		transform: scaleY(0.1);
	}

	.card {
		font-size: 28rpx;
		background-color: #fff;
		padding: 32rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		position: relative;
	}

	.uptime {
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		font-size: 26rpx;
		background-color: #feeaeb;
		color: #e57276;
		padding: 10rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		top: 0;
		right: 0
	}

	.container {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 20rpx;
	}

	.title_box {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: 600;
		width: 320rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.tag {
		font-size: 26rpx;
		color: var(--fui-color-subtitle);
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.head {
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.tag-list {
		display: flex;
		justify-content: space-between;
	}

	.zdsx1 {
		margin-left: 20rpx;
		padding: 5rpx 15rpx;
		border-radius: 8rpx;
		color: #fff;
		background-color: var(--fui-color-primary);
	}

	.zd1 {
		color: #fff;
		padding: 5rpx 15rpx;
		border-radius: 8rpx;
		background-color: var(--fui-color-danger);
	}

	.lx {
		padding: 8rpx 18rpx;
		background-color: var(--fui-color-primary);
		color: #fff;
		border-radius: 22rpx;
	}

	.bottom {
		padding-top: 20rpx;
		font-size: 26rpx;
		color: var(--fui-color-subtitle);
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.bottom::after {
		content: '';
		width: 100%;
		height: 1rpx;
		background-color: #181818;
		position: absolute;
		left: 0;
		top: 0;
		transform: scaleY(0.1);
	}

	.card {
		background-color: #fff;
		padding: 32rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		position: relative;
	}

	.uptime {
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		font-size: 26rpx;
		background-color: #feeaeb;
		color: #e57276;
		padding: 10rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		top: 0;
		right: 0
	}

	.container {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 20rpx;
	}

	.title_box {
		width: 50vw;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.tag {
		font-size: 26rpx;
		color: var(--fui-color-subtitle);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.head {
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.box {
		padding: 0rpx 32rpx 32rpx 32rpx;
	}

	.sort_item {
		position: absolute;
		right: -22rpx;
		top: -22rpx;
		background-color: var(--fui-color-primary);
		color: #fff;
		border-top-right-radius: 16rpx;
		border-bottom-left-radius: 16rpx;
		padding: 8rpx 20rpx;
	}

	.sort1 {
		margin-top: 5rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.fui-scroll__view {
		width: 520rpx;
		flex: 1;
		overflow: hidden;
	}

	.fui-ani__box {
		width: 640rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding-bottom: 64rpx;
	}

	.fui-hd__img {
		width: 100%;
		height: 192rpx;
		display: block;
	}

	.fui-ani__title {
		font-size: 36rpx;
		font-weight: 600;
		padding: 54rpx 0 32rpx;
		text-align: center;
	}

	.fui-desc {
		padding: 0 54rpx 82rpx;
		font-size: 24rpx;
		line-height: 48rpx;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
	}

	.fui-desc text {
		color: #FF2B2B;
	}

	.fui-banner__item {
		width: 100%;
		height: 360rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 600;
		border-radius: 16rpx;
	}

	.fui-banner__wrap {
		border-radius: 16rpx;
		height: 360rpx;
	}

	.wzzdsx {
		font-size: 22rpx;
		margin-right: 20rpx;
		color: var(--fui-color-primary);
		padding: 3rpx 10rpx;
		border-radius: 8rpx;
		border: 1px solid var(--fui-color-primary);
	}

	.wzzd {
		font-size: 22rpx;
		margin-right: 20rpx;
		color: var(--fui-color-danger);
		padding: 3rpx 10rpx;
		border-radius: 8rpx;
		border: 1px solid var(--fui-color-danger);
	}

	.box {
		padding: 32rpx;
	}

	.fui-col_img {
		position: relative;
	}

	.guanfang {
		font-size: 22rpx;
		color: #fff;
		padding: 5rpx 10rpx;
		background-color: #fc5531;
		position: absolute;
		top: 0px;
		border-radius: 5rpx;
	}

	.tap {
		width: 180rpx;
		font-size: 26rpx;
		display: flex;
	}

	.fui-col_bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 22rpx;
		margin-top: 20rpx;
	}

	.tap_item {
		margin-right: 10rpx;
	}

	.sort {
		margin-top: 5rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.browse {
		color: var(--fui-color-label);
		font-size: 22rpx;
	}

	.card {
		position: relative;
		padding: 22rpx;
		background-color: var(--fui-bg-color);
		border-radius: 16rpx;
		margin-top: 12rpx;
	}

	.fui-col_text-a {
		color: #181818;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}


	.fui-col_text {
		font-size: 26rpx;
		font-weight: 500;
		font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
	}


	.index {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
	}
</style>